<template>
    <div class="mt-12 w-full mb-8 overflow-hidden">
        <div class="text-xl font-semibold">Screenshots</div>
        <!-- 轮播 -->
        <div class="relative mt-4 w-full max-w-full box-border px-0 md:px-8">
            <div class="overflow-hidden mx-0 md:mx-4 w-[calc(100%-1rem)]" ref="carouselWrapper">
                <div class="flex gap-4 transition-transform duration-300 ease-in-out md:overflow-visible overflow-x-auto" :style="{ transform: `translateX(${-scrollPosition}px)` }">
                    <div v-for="(image, index) in props.screenshots" :key="index" class="flex-none h-[250px] min-w-[140px] bg-[#f5f5f5] flex items-center rounded-2xl">
                        <img loading="lazy" :src="image" class="rounded h-full w-full bg-no-repeat bg-center bg-[length:140px_250px] bg-[url('/img/default.png')]" />
                    </div>
                </div>
            </div>
            <button class="hidden md:flex absolute top-1/2 -translate-y-1/2 left-0 w-12 h-12 rounded-full bg-black/60 border border-[#EEEEEE] cursor-pointer items-center justify-center z-10 text-[#666] text-2xl hover:bg-[var(--primary-color)] hover:text-white disabled:opacity-50 disabled:cursor-not-allowed" @click="scroll('prev')" :disabled="scrollPosition <= 0">
                <svg-icon name="arrow-left" class="w-6 h-6" />
            </button>
            <button class="hidden md:flex absolute top-1/2 -translate-y-1/2 right-0 w-12 h-12 rounded-full bg-black/60 border border-[#EEEEEE] cursor-pointer items-center justify-center z-10 text-[#666] text-2xl hover:bg-[var(--primary-color)] hover:text-white disabled:opacity-50 disabled:cursor-not-allowed" @click="scroll('next')" :disabled="scrollPosition >= maxScroll">
                <svg-icon name="arrow-right" class="w-6 h-6" />
            </button>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    screenshots: {
        type: Array,
        default: () => []
    }
})
// Carousel logic
const carouselWrapper = ref(null)
const scrollPosition = ref(0)
const maxScroll = ref(0)
const scrollAmount = 300 // 每次滚动的固定距离

onMounted(() => {
    updateMaxScroll()
    window.addEventListener('resize', updateMaxScroll)
})

onUnmounted(() => {
    window.removeEventListener('resize', updateMaxScroll)
})

const updateMaxScroll = () => {
    if (carouselWrapper.value) {
        const wrapper = carouselWrapper.value
        const content = wrapper.querySelector('.carousel-content')
        if (content) {
            maxScroll.value = content.scrollWidth - wrapper.clientWidth
            // 如果内容宽度小于容器宽度，设置为0
            maxScroll.value = Math.max(0, maxScroll.value)
        }
    }
}

// 监听截图数据变化，更新maxScroll
watch(() => props.screenshots, () => {
    // 等待DOM更新后再计算
    nextTick(() => {
        updateMaxScroll()
    })
}, { deep: true })

const scroll = (direction) => {
    if (direction === 'next') {
        scrollPosition.value = Math.min(scrollPosition.value + scrollAmount, maxScroll.value)
    } else {
        scrollPosition.value = Math.max(scrollPosition.value - scrollAmount, 0)
    }
}
</script>